<template>
  <div class="w-h-full">
    <div class="clock">
      <span class="text"
         :style="{
           fontSize: component.compConfigData.fontSize + 'px',
           color: component.compConfigData.color
         }">
        <Icon v-show="component.compConfigData.icon.show" type="md-time"
              :style="{
                color: component.compConfigData.icon.color,
                padding: component.compConfigData.icon.padding + 'px',
              }" :size="component.compConfigData.icon.size"/>
        {{ component.compConfigData.showDate ? date: '' }}{{ component.compConfigData.showTime ? time: '' }}{{component.compConfigData.showWeek ? ' ' + week: ''}}
      </span>
    </div>
  </div>
</template>

<script>

  import FuncCompMixin from '@/mixin/FuncCompMixin'

  let week = ['星期天', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];

  const _this = {
    name: 'ClockComp',
    mixins: [FuncCompMixin],
    attr: {
      version: '1.1',
      configDataTemp: {
        fontSize: 24,
        color: '#daf6ff',
        showDate: true,
        showTime: true,
        showWeek: false,
        icon: {
          show: true,
          color: '#64b5f6',
          padding: 10,
          size: 24
        }
      }
    },
    data() {
      return {
        clockTimer: null,
        date: '',
        time: '',
        week: ''
      }
    },
    mounted() {
      this.updateTime();
      this.clockTimer = setInterval(this.updateTime, 1000);

      console.log(this.component)
    },
    destroyed () {
      // 清除定时器
      if(this.clockTimer) {
        clearInterval(this.clockTimer);
      }
    },
    methods: {
      zeroPadding (num, digit) {
        let zero = '';
        for(let i = 0; i < digit; i++) {
          zero += '0';
        }
        return (zero + num).slice(-digit);
      },
      updateTime () {
        let cd = new Date();
        this.time = this.zeroPadding(cd.getHours(), 2) + ':' + this.zeroPadding(cd.getMinutes(), 2) + ':' + this.zeroPadding(cd.getSeconds(), 2);
        this.date = this.zeroPadding(cd.getFullYear(), 4) + '-' + this.zeroPadding(cd.getMonth()+1, 2) + '-' + this.zeroPadding(cd.getDate(), 2) + ' ';
        this.week =  week[cd.getDay()];
      }
    },
    computed: {}
  };

  export default _this
</script>

<style lang="less" scoped>
  .clock {
    width: 100%;
    height: 100%;
    font-family: 'Share Tech Mono', monospace;
    text-shadow: 0 0 20px #0aafe6, 0 0 20px rgba(10, 175, 230, 0);
    .text {
      width: 100%;
      height: 100%;
      /* 上下垂直居中 */
      display: -webkit-flex;
      display: flex;
      -webkit-align-items: center;
      align-items: center;
      -webkit-justify-content: center;
      justify-content: center;
    }
  }
</style>
